<template>
    <div>
        <div class="topfixed">
            <v-header ref="headerbox" @goPersonal="toPersonal()"></v-header>
            <div class="list_filter" ref="filter">
                <div :class="isSelect === '全市' ? 'filteractive' : ''" @click="city()">
                    {{citytype.title}}
                    <img src="../assets/arrow_down.png" alt="" v-show="citytype.down">
                    <img src="../assets/up.png" alt="" v-show="!citytype.down">
                    <div v-show="citypopup" class="city_quyu">
                        <ul class="city_quyu_ul">
                            <li @click="sureregion(item.area_id,item.area_title)" v-for="(item,index) in regionList" :key="index" data-value="">{{item.area_title}}</li>
                        </ul>
                    </div>
                </div>
                <div v-for="(item,index) in typelist" :key="index" :class="isSelect === item.title ? 'filteractive' : ''" @click="selectNav(item.title,index)">
                    {{item.title}}
                    <img src="../assets/arrow_down.png" alt="" v-show="item.down">
                    <img src="../assets/up.png" alt="" v-show="!item.down">
                </div>
            </div>
        </div>        
        <div class="list_box" :style="{height:fullHeight}">
            <mt-loadmore :top-method="loadTop" :autoFill="isAutoFill" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
                <div class="list_item" v-for="(item, index) in list" :key="index" @click="detail(item.merid,item.len)">
                    <div class="list_item_avatar">
                        <img :src="item.title_img" alt="">
                    </div>
                    <div class="list_item_info">
                        <div class="list_item_title">{{item.mername}}</div>
                        <div class="list_item_address">{{item.address}}</div>
                        <div class="list_item_distance">
                            <div>
                                <img src="../assets/daohang.png" class="list_item_distance_img">
                                <font>{{item.len|rounding}}<span v-show="item.len != ''">km</span></font>
                            </div>
                            <div class="list_item_discount">{{item.discount}}折</div>
                        </div>
                    </div>
                </div>
                <div v-show="nodataShow" class="listnodata">{{nodata}}</div>
            </mt-loadmore>
        </div>
        <!-- <div class="replaceFooter"></div> -->
        <v-footer opacity="0.8" @judge="toPay('renewal',0)" :member="status" ref="footerbox"></v-footer>
    </div>
</template>
<script>
import header from '@/components/common/header'
import footer from '@/components/common/footer'
import Loadmore from 'mint-ui'
import cookie from '../../store/modules/cookie'
import common from '../../store/modules/common.js'
import wx from 'weixin-js-sdk'
    export default {
        components: {
            'v-header': header,
            'v-footer': footer,
            Loadmore
        },
        data () {
            return {
                list: [],
                allLoaded:false,
                isAutoFill: false,
                fullHeight:"",
                status:0,
                cateid:0,
                nodataShow:false,
                nodata:"",
                isSelect: '全市',
                isSelectattr: '',//排序种类
                isSelectsort: 'asc',
                typelist:[
                    {title:'折扣',down:true},
                    {title:'距离',down:true},
                    {title:'核销量',down:true}
                ],
                citypopup:false,
                citytype:{title:"全市",down:true,aredid:''},
                regionList:[],
                page:1,
                limit:10,
                loation:{
                    latitude:"",//纬度
                    longitude:"" //经度
                }
                
            }
        },
        mounted() {
            let headerHeight = this.$refs.headerbox.$refs.header.offsetHeight
            let footerHeight = this.$refs.footerbox.$refs.footer.offsetHeight
            let filterHeight = this.$refs.filter.offsetHeight
            this.fullHeight = (document.documentElement.clientHeight-headerHeight-filterHeight-footerHeight)+"px";
        },
        created(){
            this.cateid = this.$route.query.cateid,
            // this.loation.latitude = this.$route.query.latitude
            // this.loation.longitude = this.$route.query.longitude
            this.getregion()
            this.getmember()
            this.getlocation()
        },
        filters: {
            rounding (value) {
               let realVal = ''
                if (!isNaN(value) && value!== '') {
                // 截取当前数据到小数点后两位
                    realVal = parseFloat(value).toFixed(2)
                } else {
                    realVal = '--'
                }
                return realVal
            }
        },
        methods: {
            //获取经纬度
            getlocation(){
                let that = this
                let url = window.location.href.split('#')[0]
                that.$http.get('merchant/Scanqrcode/index',{url:url}).then((res)=>{
                    if(res.code == 0){
                        wx.config({
                            debug: false,
                            appId: res.data.appId,
                            timestamp: res.data.timestamp,
                            nonceStr: res.data.nonceStr,
                            signature: res.data.signature,
                            jsApiList: ['getLocation']
                        });
                        wx.ready(function(){
                            wx.getLocation({
                                type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                                success: function (data) {
                                    that.loation.latitude = data.latitude; // 纬度，浮点数，范围为90 ~ -90
                                    that.loation.longitude = data.longitude; // 经度，浮点数，范围为180 ~ -180。
                                    that.getdata(that.cateid,that.page,that.isSelectsort,that.loation)
                                }
                            });                               
                        })
                        wx.error(function(data){
                            that.$messagebox('提示' ,'失败');
                        });
                    }
                })   
            },
            //列表排序关键词
            selectNav(title,index){
                let that = this
                let sort = "desc"
                this.isSelect = title
                this.typelist[index].down = !this.typelist[index].down
                if(this.typelist[index].down){
                   sort = "desc"
                }else{
                    sort = "asc"
                }
                that.isSelectsort = sort
                if(that.isSelect == '折扣'){
                    this.isSelectattr = 'discount'
                    
                }else if(that.isSelect == '距离'){
                    this.isSelectattr = 'location'             
                    
                }else if(that.isSelect == '核销量'){
                    this.isSelectattr = 'verf_num'
                }                 
                this.getdata(that.cateid,that.page,that.isSelectsort,that.loation,that.citytype.aredid,that.isSelectattr)
            },
            city(){
                this.isSelect = this.citytype.title
                this.citytype.down = !this.citytype.down
                this.citypopup = !this.citypopup
            },
            //获取城市分类
            getregion(){
                let that = this
                that.$http.get('user/index/area').then((res)=>{
                    if(res.code == 0){
                        that.regionList = res.data
                    }else{

                    }

                })
            },
            //确定市区
            sureregion(areaid,title){
                let that = this
                that.citytype.title = title
                that.citytype.aredid = areaid
                that.isSelectsort = 'asc'
                this.getdata(that.cateid,that.page,that.isSelectsort,that.loation,that.citytype.aredid)
            },
            //获取列表
            getdata(cateid,page,value,data,areaid,attr){
                let that = this
                let datas={
                    cate_id:cateid,
                    page:page,
                    limit:that.limit,
                    value:value,//排序值->正序倒序值
                    data:data,//附加值->经纬度
                    area_id:areaid,
                    attr:attr,//排序分类值
                }
                that.$http.get('user/merchant/merchantlists',datas).then((res)=>{
                    if(res.code == 0){
                        for(var i = 0 ;i<res.data.length;i++){
                            if(res.data[i].title_img){
                                res.data[i].title_img = common.state.baseUrl+res.data[i].title_img.split(',')[0]
                            } 
                        } 
                        that.nodataShow = false                                
                        if(that.page == 1){
                            that.list = res.data
                        }else{
                            if(res.data.length < that.limit){
                                that.allLoaded = true                            
                            }
                            that.list = that.list.concat(res.data)                            
                        }                        
                    }else{
                        if(that.page == 1){
                            that.list = []
                        }
                        that.nodataShow = true
                        that.nodata = res.msg
                        that.allLoaded = true
                    }
                })
            },
            loadTop() {
                let that = this
                that.page = 1
                this.getdata(that.cateid,that.page,that.isSelectsort,that.loation,that.citytype.aredid,that.isSelectattr)
                this.$refs.loadmore.onTopLoaded();
            },
            loadBottom() {
                let that = this
                that.page ++
                this.getdata(that.cateid,that.page,that.isSelectsort,that.loation,that.citytype.aredid,that.isSelectattr)
                this.$refs.loadmore.onBottomLoaded();
            },
            //判断是否是会员
            getmember(){
                let that = this
                let openid = cookie.getCookie('openid')
                that.$http.get('/user/index/getMemberType',{openid:openid}).then((res)=>{
                    if(res.code == 0){
                       that.status = res.data.status
                    }else{
                        that.$messagebox(res.msg)
                    }
                })
            },
            //跳转详情
            detail (id,len) {
                this.$router.push({
                    path: '/detail',
                    query: {
                        merid: id,
                        len:len
                    }
                })
            },
            toPay(path,typeid){
                if(this.status ==-1){
                    this.$router.push({
                        path:path,
                        query:{
                            typeid:typeid
                        }
                    })
                }else{
                    this.$router.push({
                        path:'/',
                    }) 
                }   
            },
            toPersonal(){
                this.$router.push({
                    path:'/my'
                })
            }
        }
    }
</script>
<style scoped>
.topfixed{
    /* position: fixed;
    width: 100%;
    top: 0; */
}
.list_filter{
    display: flex;
    flex: 1;
}
.list_filter{
    font-size: 38px;
    color: #231815;
    height: 112px;
    line-height: 112px;
    background: #fff;
}
.list_filter div{
    height: 112px;
    line-height: 112px;
    flex: 0 0 25%;
    padding: 0 15px;
    text-align: center;
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space:nowrap;
}
.list_filter img{
    width: 24px;
    height: 12px;
    vertical-align: middle;
}
.list_box{
    background: #EAECED;
    padding: 21px 20px 0 21px;
    /* margin-top: 672px; */
    overflow: scroll;
    /* min-height:244px; */
}
.list_item{
    display: flex;
    flex: 1;
    background: #fff;
    border-radius: 12px;
    padding: 40px 34px 42px 42px;
    box-sizing: border-box;
    margin-bottom: 22px;
}
.list_item_avatar{
    flex: 0 0 21%;
    height: 162px;
    box-sizing: border-box;
}
.list_item_avatar img{
    width: 216px;
    height: 100%;
}
.list_item_info{
    flex: 0 0 79%;
    padding-left: 48px;
    box-sizing: border-box;
    overflow: hidden;
}
.list_item_title{
    color: #2d2d2d;
    font-size: 45px;
    line-height: 54px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.list_item_address{
    color: #A1A0A0;
    font-size: 36px;
    line-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 24px 0 18px 0;
}
.list_item_distance{
    color: #A1A0A0;
    font-size: 36px;
    display: flex;
    justify-content: space-between;
    
}
.list_item_distance img{float: left;}
.list_item_distance font{
    line-height: 60px;
}
.list_item_discount{
    border: 1px solid #22CFB6;
    border-radius: 12px;
    color: #22CFB6;
    height: 41px;
    line-height: 45px;
    font-size: 32px;
}
.filteractive{
    color: #22CFB6;
}
.listnodata{
    text-align:center;
    font-size:36px
}
.city_quyu{
    position: absolute;
    z-index: 9999;
    background: #fff;
    width: 100%;
    border-top: 1px solid #F8F8F8;
}
.city_quyu_ul{
    display: flex;
    /* justify-content: space-around; */
    flex-wrap: wrap;
}
.city_quyu_ul li{
    list-style-type: none;
    /* flex: 0 0 25%; */
    background: #F8F8F8;
    text-align: center;
    color: #666666;
    padding: 0 25px;
    font-size: 36px;
    height: 81px;
    line-height: 81px;
    margin: 21px;
}
.list_item_distance_img{
    height: 54px;
}
.replaceFooter{height: 248px;width: 100%;}
</style>